<template>
  <div class="main">
    <div class="orderMain">
      <!-- 面包屑：导航 -->
      <app-link :name="title"></app-link>

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="seachForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="seachForm.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="seachForm.user_id" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" icon="el-icon-search" @click="fetchtype">查询</el-button>
          <el-button type="warning" icon="el-icon-refresh-left" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 订单列表 -->
      <el-table :data="orderList" border style="width: 100%" stripe>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="user_id" label="用户名" width="120"></el-table-column>
        <el-table-column prop="good_id" label="商品ID" width="70"></el-table-column>
        <el-table-column prop="name" label="商品名称" width="220"></el-table-column>
        <el-table-column label="商品图片" width="100">
          <template slot-scope="scope">
            <!-- scope指整个数据对象，scope.row指当前行数据 -->
            <img :src="scope.row.src[0]" alt style="width:70px;height: 60px;" />
          </template>
        </el-table-column>
        <el-table-column prop="num" label="商品数量" width="80"></el-table-column>
        <el-table-column prop="price" label="商品价格" width="80"></el-table-column>
        <el-table-column prop="cart_iphone" label="订单电话" width="120"></el-table-column>
        <el-table-column prop="addr" label="订单地址" width="190"></el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="editOrder(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delOrder(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改订单 -->
      <el-dialog title="修改订单" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item label="商品名称" prop="name" :label-width="formLabelWidth">
            <el-input v-model="ruleForm.name" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="num" :label-width="formLabelWidth">
            <!-- <el-input v-model="ruleForm.num" placeholder="请输入商品简介" autocomplete="off"></el-input> -->
            <el-input-number
              v-model="ruleForm.num"
              @change="handleChange"
              :min="1"
              :max="20"
              label="订单数量"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="订单电话" prop="cart_iphone" :label-width="formLabelWidth">
            <el-input v-model.trim="ruleForm.cart_iphone" placeholder="请输入订单电话" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单地址" prop="addr" :label-width="formLabelWidth">
            <el-input v-model.trim="ruleForm.addr" placeholder="请输入订单地址" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="isedit">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        v-show="pages > 1"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import appLink from "@/components/link";
// 引入接口文档
import orderApi from "@/api/orderApi.js";
export default {
  data() {
    var validateIphone = (rule, value, callback) => {
      let reg = /1[3-9]\d{9}/;
      if (reg.test(value) && value.length == 11) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号码"));
      }
    };
    return {
      title: "订单管理",
      page: 1, //页码
      pagesize: 10, //一页多少条数据
      total: 0, //总数据条数
      pages: 2, //分几页
      seachForm: {}, //查询条件,
      orderList: [], //订单列表
      dialogFormVisible: false, //修改弹窗开关
      formLabelWidth: "120px",
      ruleForm: {
        name: "",
        num: "",
        addr: ""
      },
      rules: {
        cart_iphone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          { validator: validateIphone, trigger: "blur" }
        ]
      },
      edit1: false,
      edit2: false
    };
  },

  components: { appLink },

  methods: {
    // 功能：查询所有列表
    async fetchall() {
      let p = await orderApi.getList(this.page, this.pagesize);
      console.log(p.data, "!!!");
      if (p.data.data.length) {
        this.orderList = p.data.data; //数据列表
        this.orderList.forEach(item => {
          item.src = item.src.replace("[", "");
          item.src = item.src.replace("]", "");
          item.src = item.src.split(",");
        });
        this.total = p.data.total; //总数据条数
        this.pages = p.data.pages;
      }
    },

    // 功能：模糊查询
    async fetchtype() {
      console.log(this.page, this.pagesize, this.seachForm);

      let p = await orderApi.gettype(this.page, this.pagesize, this.seachForm);
      console.log(p.data, "######");
      if (p.data.flag) {
        this.orderList = p.data.data;
        this.orderList.forEach(item => {
          item.src = item.src.replace("[", "");
          item.src = item.src.replace("]", "");
          item.src = item.src.split(",");
        });
        this.total = p.data.typetotla;
        this.pages = p.data.pages;
      } else {
        this.$message({
          message: "找不到数据，换个条件试试",
          type: "warnning"
        });
      }
    },

    // 功能：重置
    reset() {
      this.seachForm = {}; //查询条件清空
      this.fetchall(); //刷新
    },

    // 功能：编辑修改
    editOrder(row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.ruleForm = row;
    },
    // 功能：确认修改
    async isedit() {
      // console.log(this.ruleForm.id, this.ruleForm.addr);
      // 修改地址
      try {
        let p1 = await orderApi.editadrr(this.ruleForm.id, this.ruleForm.addr);
        this.edit1 = p1.data.flag;

        // 修改数量、电话号码
        let p2 = await orderApi.editorder(
          this.ruleForm.user_id,
          this.ruleForm.good_id,
          this.ruleForm.num,
          this.ruleForm.cart_iphone
        );
        this.edit2 = p2.data.flag;

        console.log(this.edit1, this.edit2, "%%%%%");

        if (this.edit1 && this.edit2 == true) {
          this.$message({
            message: "修改订单成功",
            type: "success"
          });
          this.dialogFormVisible = false;
          this.fetchall();
        } else {
          this.$message({
            message: "修改失败",
            type: "error"
          });
        }
      } catch (err) {
        this.$message({
          message: "修改失败",
          type: "error"
        });
      }
    },

    // 功能:更改数量
    handleChange(value) {
      console.log(value);
    },

    // 功能：删除
    async delOrder(row) {
      console.log(row.cart_id);
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          //确定
          let p = await orderApi.delorder(row.cart_id);
          console.log(p.data);
          if (p.data.flag) {
            //  删除成功
            this.$message({
              message: "删除成功",
              type: "success"
            });
            // 关闭弹窗，并刷新数据
            this.dialogFormVisible = false;
            this.fetchall();
          } else {
            this.$message({
              message: "失败",
              type: "error"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 功能：分页 每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val; //每页多少条
      this.page = 1;
      this.fetchall();
    },
    // 功能：分页 当前页面
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.fetchall();
    }
  },
  created() {
    this.fetchall();
  }
};
</script>

<style scoped>
</style>
<style>
.orderMain .line {
  border-left: 5px solid #e6a23c;
}
.orderMain .el-pagination .el-pager li:hover {
  border: 1px solid #e6a23c;
}
.orderMain .el-pagination .el-pager .active {
  background: #e6a23c;
  color: #fff;
  cursor: pointer;
}
.orderMain .el-pager li:hover {
  color: #67c23a;
}
</style>